<template>
    <div id="User">
        <article>
            <h2>我的消息</h2>
            <el-table :data="tableData" style="width: 100%">
                <el-table-column
                    label="消息"
                    prop="msg"
                    style="text-align: center"
                >
                </el-table-column>
            </el-table>
        </article>
    </div>
</template>
  
  <script>
import { mapState, mapMutations } from "vuex";

export default {
    name: "User",
    data() {
        return {
            allArticle: [],
            Info: {},
            activeName: "first",
            isFollowEd: false,
            tableData: [],
        };
    },
    computed: {
        ...mapState(["userInfo"]),
    },
    methods: {
        toPersonal(scope) {
            this.$router.push(`/personal/${scope.serial}`);
        },
        handleDelete(index, row) {
            if (this.$store.state.userInfo.serial) {
                this.$axios({
                    method: "get",
                    headers: { token: localStorage.getItem("token") || "" },
                    url: `http://localhost:8081/ts/user/unfollow?userId=${row.serial}&followerId=${this.$store.state.userInfo.serial}`,
                }).then((res) => {
                    if (res.data.respCode === "200")
                        this.$message.success("取消关注成功");
                    this.$axios({
                        method: "get",
                        headers: { token: localStorage.getItem("token") || "" },
                        url: `http://localhost:8081/ts/user/myfollowers?userId=${this.$store.state.userInfo.serial}`,
                    }).then((res) => {
                        this.tableData = res.data.respData;
                        console.log(this.tableData);
                        //   this.Info = JSON.parse(res.data.respData.user)
                        //   if (res.data.respData.isFollowed) this.isFollowEd = res.data.respData.isFollowed
                    });
                });
            } else {
                this.$message.warning("暂未登录");
            }
        },
    },
    created() {
        if (!this.$store.state.userInfo.serial) {
            this.$message.warning("暂未登录");
            this.$router.push("/");
        }
        this.$axios({
            method: "get",
            headers: { token: localStorage.getItem("token") || "" },
            url: `http://localhost:8081/ts/user/getmsg?userId=${this.$store.state.userInfo.serial}`,
        }).then((res) => {
            this.tableData = res.data.respData;
            console.log(this.tableData);
            //   this.Info = JSON.parse(res.data.respData.user)
            //   if (res.data.respData.isFollowed) this.isFollowEd = res.data.respData.isFollowed
        });
    },
};
</script>
  
  <style lang="less" scoped>
div.cell {
    text-align: center !important;
}
#Article {
    flex: 1;

    .articleItem {
        box-sizing: border-box;
        position: relative;
        width: 100%;
        margin-bottom: 15px;
        box-shadow: 0 0 4px #ddd;
        padding: 25px 20px;
        background-color: #fff;
        font-family: Quicksand;
        border-radius: 15px;

        h2 {
            margin-bottom: 15px;
            font-size: 20px;
            letter-spacing: 3px;
            line-height: 24px;
            border-left: 5px solid #73b899;
            text-indent: 10px;
        }
        .time {
            position: absolute;
            top: 0;
            right: 5px;
            width: 135px;
            .date {
                font-weight: bolder;
                font-size: 20px;
                text-align: center;
                color: #73b899;
                span {
                    font-size: 20px;
                }
            }
        }
        .show {
            display: flex;
            width: 100%;
            height: 200px;
            .img {
                box-sizing: border-box;
                width: 50%;
                padding-right: 1%;
                background-size: cover;
                background-position: center;
                border-radius: 15px;
                background-image: url(../assets/img/article/3.jpg);
            }
            .img2 {
                box-sizing: border-box;
                width: 50%;
                padding-right: 1%;
                background-size: cover;
                background-position: center;
                border-radius: 15px;
                background-image: url(../assets/img/article/2.jpg);
            }
            .des {
                box-sizing: border-box;
                width: 50%;
                padding-left: 5%;
                padding-top: 10px;
                font-size: 16px;
            }
        }
        .r-b {
            position: absolute;
            right: 20px;
            bottom: 20px;
            p {
                position: relative;
                left: 15px;
                top: -15px;
                color: #aaa;
                font-size: 12px;
            }
            a {
                padding: 10px 20px;
                background-color: #409eff;
                color: #fff;
                transition: opacity 0.3s;
                border-radius: 15px;
            }
        }
    }
}
#User {
    flex: 1;

    article {
        border-radius: 15px;
        box-sizing: border-box;
        width: 100%;
        margin-bottom: 15px;
        box-shadow: 0 0 4px #ddd;
        padding: 25px 20px;
        background-color: #fff;

        h2 {
            margin-bottom: 15px;
            font-size: 20px;
            letter-spacing: 3px;
            line-height: 24px;
            border-left: 5px solid #73b899;
            text-indent: 10px;
        }
    }

    /deep/ .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
        margin-top: 10px;
    }
    /deep/ .avatar-uploader .el-upload:hover {
        border-color: #409eff;
    }
    /deep/ .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }
    /deep/ .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }
}
</style>